<template>
	<div>
		<header class="header">
			<a-form layout="inline">
				<a-form-item label="用户名">
					<a-input v-model:value.trim="queryParams.user_name"></a-input>
				</a-form-item>
				<a-form-item label="类型">
					<a-select class="opop" v-model:value="queryParams.type" placeholder="">
						<a-select-option value="1">普通用户</a-select-option>
						<a-select-option value="2">创作者</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="手机号">
					<a-input v-model:value="queryParams.phone" />
				</a-form-item>
				<a-form-item>
					<a-button type="danger" @click="serchButton">查询</a-button>
				</a-form-item>
			</a-form>
		</header>
		<!--表格操作项目-->
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>Id</th>
					<th>用户名</th>
					<th>手机号</th>
					<th>余额</th>
					<th>订单数</th>
					<th>创作者</th>
					<th>资源数</th>
					<th>状态</th>
					<th>注册时间</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item,index) in memberLists" :key="index">
					<td>{{item.user_id}}</td>
					<td>{{item.nickname}}</td>
					<td>{{item.phone}}</td>
					<td>{{item.money}}</td>
					<td>{{item.order_num}}</td>
					<td>{{item.type}}</td>
					<td>{{item.ziyuan_num}}</td>
					<td>{{item.state}}</td>
					<td>{{item.create_time}}</td>
				</tr>
			</tbody>
		</table>
		<!-- 分页 -->
		<div class="padding-t-20">
			<a-pagination :pageSize="formCount.pageSize" :current="formCount.page" :total="formCount.count"
				@change="clickPage" :pageSizeOptions="pageSizeOptions" show-size-changer
				@showSizeChange="onShowSizeChange" show-quick-jumper />
		</div>
	</div>
</template>

<script>
	import apiUser from '../../api/user'
	export default {
		data() {
			return {
				// 判断搜索 分页
				// 获取用户信息列表数据
				memberLists: [],
				queryParams: {
					user_name: '',
					phone: '',
					type: '',
				},
				// 分页
				pageSizeOptions: ['20', '50', '100', '150'],
				formCount: {
					count: '',
					page: 1,
					pageSize: 20,
				}
			}
		},
		mounted() {
			this.memberList()
		},
		methods: {
			memberList() {
				this.serchButton()
			},
			// 分页
			clickPage(e) {
				this.formCount.page = e;
				this.memberList()
			},
			onShowSizeChange(current, pageSize) {
				this.formCount.pageSize = pageSize;
				this.formCount.page = 1;
				this.memberList()
			},
			// 查询搜索
			serchButton() {
				apiUser.getUserList(this.formCount.page, this.formCount.pageSize, this.queryParams.user_name, this.queryParams.type, this.queryParams.phone).then((res) => {
					if (res.status == 1) {
						this.memberLists = res.result.data;
						this.formCount.count = res.result.count
					}
				})
			}
		},
	}
</script>

<style scoped>
	:deep( .ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
		width: 180px;
		height: 32px;
		padding: 0 11px;
	}
</style>>
